<template>
    <div class="home-recommond">
      <h3>推荐歌单 ></h3>
      <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
          <li
            v-for="(item, index) in listData"
            :key="index"
            @click="selectItem(item)"
          >
            <div class="cover">
              <van-image :src="item.picUrl" radius="10" />
              <span>{{ item.playCount | numFilter(1) }}万</span>
            </div>
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  import { betterScrollHorizontal } from "../../common/betterScroll";
  export default {
    data() {
      return {
        listData: [],
      };
    },
    created() {
      this.getSongListSData();
    },
    methods: {
      getSongListSData() {
        this.$request("get", "/personalized").then((res) => {
          //console.log(res);
          if (res.code == 200) {
            this.listData = res.result;
          }
          betterScrollHorizontal(
            this,
            this.$refs.wrapper,
            this.$refs.content,
            this.listData.length,
            10
          );
        });
      },
      selectItem(item) {
        const id = item.content_id;
        this.$router.push({ path: `/songlist/${id}` });
      },
    },
      filters:{
               numFilter(value, num){
                   return parseFloat(value/10000).toFixed(num) 
           }
       }
  };
  </script>
  
  <style scoped>
  .wrapper {
    width: 100%;
    overflow: hidden;
  }
  
  /* ul.content {
      width: calc(12 * 10rem);
  } */
  
  ul.content > li {
    width: 10rem;
    display: inline-block;
    vertical-align: top;
    /**垂直方向的对齐方式 */
  }
  
  ul.content > li * {
    margin: 0 0.1rem;
  }
  
  .cover {
    position: relative;
  }
  
  .cover > span {
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    display: inline-block;
    background-color: burlywood;
  }
  
  .home-recommond > h3 {
    text-align: left;
    margin-left: 10px;
  }
  </style>